<template>
    <el-container class="include-container">
        <div class="card-wrap">
            <div class="card-list-header">
                <span class="card-title">功能管理</span>
                <div class="page-right">
                    <auth-router-link :to="{path:'/rule/detail',query:{pid:0,id: 0 } }" type="primary" size="small" text="添加" :route_name="'/rule/detail'"></auth-router-link>
                </div>
            </div>
            <div style="width: 100%;border-bottom: 10px solid #F4F4F4;"></div>
            <div class="card-body-blank list-data-table">
                <el-table :data="tableData" border header-row-class-name="table-header-th" size="small" height="500"
                    row-key="ID" :tree-props="{ children: 'children' }">
                    <el-table-column prop="ID" width="100" align="center" label="编号">
                    </el-table-column>
                    <el-table-column label="权限" width="180" align="center">
                        <template #default="scope">
                            <span v-html="scope.row.title"></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="80" label="层级">
                        <template #default="scope">
                            <span v-if="scope.row.depth == 1"><el-tag size="small" type="danger"
                                    effect="plain">一级</el-tag></span>
                            <span v-if="scope.row.depth == 2"><el-tag size="small" type="success"
                                    effect="plain">二级</el-tag></span>
                            <span v-if="scope.row.depth == 3"><el-tag size="small" type="info"
                                    effect="plain">三级</el-tag></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rule" width="260" align="center" label="规则"></el-table-column>
                    <el-table-column prop="route" width="260" align="center" label="路由"></el-table-column>
                    <el-table-column width="100" label="类型" align="center">
                        <template #default="scope">
                            <span v-if="scope.row.is_menu == 1"><el-tag size="small" type="danger">菜单</el-tag></span>
                            <span v-if="scope.row.is_menu == 2"><el-tag size="small" type="warning">节点</el-tag></span>
                            <span v-if="scope.row.is_menu == 3"><el-tag size="small" type="success">接口</el-tag></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort_id" width="120" align="center" label="排序">
                    </el-table-column>
                    <el-table-column label="操作" align="left" width="280" fixed="right">
                        <template #default="scope">
                            <auth-router-link  :to="{path:'/rule/detail',query:{ pid:0, id:scope.row.ID } }" size="small" text="编辑" :route_name="'/rule/detail'"></auth-router-link>
                            <auth-button @click="deleteData(scope.row.ID)" type="default" size="small" text="删除" :route_name="'/sys/rule/deleteRule'"></auth-button>
                            <auth-router-link   v-if="scope.row.depth != 3" :to="{path:'/rule/detail',query:{ pid: scope.row.ID, id: 0} }" size="small" text="添加子权限" :route_name="'/rule/detail'"></auth-router-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="height:120px"></div>
        </div>

    </el-container>
</template>

<script setup>
import AuthRouterLink from "../../components/AuthRouterLink.vue"
import AuthButton from "../../components/AuthButton.vue"
import { ref, reactive } from 'vue'
import { getRuleList,deleteRule } from "~/api/rule"
import { toast } from "~/composables/util"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
const router = useRouter()
const store = useStore()

const searchForm = reactive({
    title: "",
})

// 分页
const currentPage = ref(1)
const tableData = ref([])
const loading = ref(false)
// 获取数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }

    loading.value = true
    getRuleList(currentPage.value, 10, searchForm.title)
        .then(res => {
            if (res.code == 200) {
                tableData.value = res.data.list
            } else {
                toast(res.msg, 'error')
            }
        })
        .finally(() => {
            loading.value = false
        })
}
getData()

function formatDate(time) {
    const date = new Date(time * 1000);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加一，并且补零
    const day = String(date.getDate()).padStart(2, '0');
    const hour = String(date.getHours()).padStart(2, '0');
    const minute = String(date.getMinutes()).padStart(2, '0');
    const second = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}

//删除数据
function deleteData(val) {
    deleteRule(val)
        .then(res => {
            if (res.code == 200) {
                toast(res.msg)
                getData();
            } else {
                toast(res.msg, 'error')
            }
        })
}

</script>